<template>
  <BaseChart :options="options" height="500px" />
</template>

<script>
import { last30dates } from '@/utils/helper/date';
function random(min = 0, max = 100) {
  const value = Math.random() * max + min;
  return parseInt(value);
}

function range(total = 30) {
  const arr = [];
  for (let i = 0; i < total; i++) {
    arr.push(random());
  }
  return arr;
}


let options = {
  tooltip: {
    trigger: "axis",
    position: function (pt) {
      return [pt[0], "10%"];
    },
  },
  dataZoom: [
    {
      type: "inside",
      start: 0,
      end: 10,
    },
    {
      start: 0,
      end: 10,
    },
  ],
  legend: {
    // data: ['行为', '访问', '操作', '账号']
    data: [
      {
        name: "数据定义",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "数据操作",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "数据控制",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "其他",
        textStyle: {
          color: "#666",
        },
      },
    ],
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["05-07", "05-08", "05-09", "05-10", "05-11", "05-12", "05-13"],
    axisLine: {
      lineStyle: {
        color: "#666",
      },
    },
  },
  yAxis: {
    type: "value",
    axisLine: {
      lineStyle: {
        color: "#666",
      },
    },
  },
  series: [
    {
      name: "数据定义",
      type: "line",
      data: [22000, 22000, 22000, 22000, 38000, 38000, 32000],
    },
    {
      name: "数据操作",
      type: "line",
      data: [75000, 75000, 68000, 77000, 72000, 72000, 79000],
    },
    {
      name: "数据控制",
      type: "line",
      data: [55000, 51000, 55000, 55000, 51000, 47000, 50000],
    },
    {
      name: "其他",
      type: "line",
      data: [38000, 41000, 48000, 38000, 31000, 38000, 31000],
    },
  ],
};
export default {
  data() {
    return {
      options,
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.options.xAxis.data = last30dates()
      const arr = [...this.options.series]
      for (let i = 0; i < this.options.series.length; i++) {
        const data = range(this.options.xAxis.data.length)
        arr[i].data = data
      }
      this.options.series = arr
      console.log('this.options.series: ', this.options.series);
    }
  },
};
</script>

<style>
</style>